<template>
  <div class="container">
    <header class="layout-header flex flex-align-center" style="-webkit-app-region: drag">
      <div class="header-left" style="-webkit-app-region: no-drag" @click="toGuanwang">
        <img class="header-logo" src="../assets/img/layout-top-tabs/logo.png" alt="LOGO">
        <span class="to-guanwang">官网</span>
      </div>
      <div class="header-center" style="-webkit-app-region: no-drag;">
        <ul class="header-center-ul flex flex-align-center">
          <li class="header-center-li" v-for="(item,index) in headerTabsLists" :key="index">
            <img :src="item.icon" class="header-center-li-icon">
            <span class="header-center-li-text" @click="changeLayoutTabs(index,item.text)">{{item.text}}</span>
            <img :src="item.arrow" alt="" class="header-center-li-arrow">
            <span class="triangle" v-show='nowIndex == index'></span>
            <div class="conte-us flex flex-v" v-if='item.submenu.length > 0 && isSubmenu'>
              <span class=" conte-us-triangle"></span>
              <div class="item flex flex-align-center flex-pack-center" v-for='(e,i) in item.submenu' :key="i" @click="changeLayoutTabs(index,e.text)"><p>{{e.text}}</p></div>
          </div>
          <span class="infoBox" v-if="item.text == '聊天室' && allUnReadNum>0">{{allUnReadNum}}</span>
          </li>
        </ul>
      </div>
      <div class="header-right flex flex-align-center" style="-webkit-app-region: no-drag">
        <div class="closebox flex flex-align-center"  @click='onMinfun'>
             <img src="../assets/img/layout-top-tabs/header-tabs-min-icon.png" alt="" class="header-right-min-icon" title="最小化">
        </div>
        <div class="closebox flex flex-align-center" @click='onMaxfun'>
            <img src="../assets/img/layout-top-tabs/header-tabs-max-icon.png" alt="" class="header-right-max-icon" style="margin-left:3px;" title="最大化">
        </div>
       <div class="closebox flex flex-align-center flex-pack-center" @click="onClosefun" style="margin-left:3px;margin-right:-0.03rem">
          <img src="../assets/img/layout-top-tabs/header-tabs-close-icon.png" alt="" class="header-right-close-icon" title="关闭" >
        </div>
      </div>
    </header>
    <section class="layout-content flex">
      <div class="content-left">
        <cascade-selection :options="parentOptions" :placeholderVar="parentPlaceHolder" @returnSelectionFuc="parentSelectionFuc"></cascade-selection>
        <!-- 根据彩票种类切换组件 -->
        <Shishicai v-show="caipiaoType == 'ssc' || caipiaoType == 'l11x5' || caipiaoType == 'k3' || caipiaoType == 'l3d'" :SSCinfo="openInfo" ></Shishicai>
        <JiaNaDa v-show="caipiaoType == 'l28'" :Jndinfo = 'openInfo'></JiaNaDa>
        <bei-jing-p-k v-show="caipiaoType == 'pk10'" :PKinfo = 'openInfo'></bei-jing-p-k>
        <bottom-selection v-if="islayoutLeftSelectionShow" :selectionListVar='selectionListVar' :selectionTabsTitle='selectionTabsTitle'></bottom-selection>
        <bottom-check-box v-if="isBottomCheckBoxShow" :checkBoxListVar='selectionListVar' :selectionTabsTitle='selectionTabsTitle'></bottom-check-box>
      </div>
      <div class="content-right">
        <router-view :caipiao-type="caipiaoType" :caipiaoID = 'selectedCaiPiaoID'></router-view>
      </div>
    </section>
    <!-- 商务合作 -->
    <BusiNess :isModel="isBusiNess" v-on:closed="closeBusinessFun"></BusiNess>
    <!-- 意见反馈 -->
    <Opinion :isModel="isOpinion" v-on:closed="closeOpinionFun"></Opinion>
    <footer class="layout-footer flex flex-align-center" style="-webkit-app-region: drag">
      <div class="footer-left-white-box"></div>
      <div class="footer-right flex flex-align-center">
        <div class="footer-right-username">用户名：{{ $store.state.userInfo.user_name }}</div>
        <div class="footer-right-usercount">在线用户数：
          <span class="usercount-color">{{online_number}}</span>
        </div>
        <div class="footer-right-customerQQ">客服QQ：{{footerMgs.server_qq}}</div>
        <div class="footer-right-website-link" style="-webkit-app-region: no-drag" >公司官网: <span @click="toGuanwang">{{footerMgs.official_website_link}}</span></div>
      </div>
    </footer>
    <!-- 空白蒙层 用于关闭联系我们 -->
    <div class="model" v-if='isSubmenu' @click="onCloseModel"></div>
    <LoadBox v-if="isLoad"></LoadBox>
  </div>
</template>

<script>
import CascadeSelection from "./CascadeSelection";
import JiaNaDa from "@/components/lotteryTemplateLeft/jianada.vue";
import Shishicai from "@/components/lotteryTemplateLeft/shishicai.vue";
import BeiJingPK from "@/components/lotteryTemplateLeft/beijingPK";
import BottomSelection from './LayoutLeftBottomSelection/LeftSelection/layoutLeftBottomSelect'
import BottomCheckBox from './LayoutLeftBottomSelection/LeftCheckBox/layoutLeftBottomCheckBox'
import BusiNess from '@/components/contectus/business'
import Opinion from '@/components/contectus/opinion'
import TabsData from '@/assets/js/layoutHeaderTabsData'
import {format} from '@/public/tools';
import LoadBox from '@/components/login/Loading.vue';
if (window.require) {
  var ipc = window.require('electron').ipcRenderer;
  var shell = window.require('electron').shell;
}
export default {
  data() {
    return {
      isOpinion:false,
      isBusiNess:false,
      headerTabsLists: TabsData.data, 
      footerMgs: {},
      //传递给级联选择器的数组
      parentOptions: [],
      openInfo: {}, //type为时时彩的数据
      //传递给级联选择器的placeholder
      parentPlaceHolder: "重庆时时彩",
      caipiaoType: "ssc",
      selectedCaiPiaoID:1,
      cascadeSelectionlotteryListsArr:[],
      nowIndex:0,
      islayoutLeftSelectionShow:false,
      isBottomCheckBoxShow:false,
      isSubmenu:false,
      selectionListVar:[], //左侧三级菜单数据
      selectionTabsTitle:'', //左侧菜单名
      isLoad:false, //更新loading动画
      is_max:0, //窗口是否最大化
      online_number:'',
    };
  },
  components: {
    CascadeSelection,
    JiaNaDa,
    Shishicai,
    BeiJingPK,
    BottomSelection,
    BottomCheckBox,
    BusiNess,
    Opinion,
    LoadBox
  },
  computed:{
    litteryid(){
      return this.$store.state.lottery_id
    },
    tabsName(){
      return this.$store.state.tabsName;
    },
    websockeinfo(){
      return this.$store.state.TypeMessage
    },
    allUnReadNum(){
      return this.$store.getters.getAllUnRead;
    }
  },
  watch:{
    litteryid(){ //彩种id的变化
        this.getLitterytype()  
        this.getOpendataFn()
        if(this.$store.state.tabsName == '计划推荐'){
            this.getLefttypeclientlist()
        }

        if(this.$store.state.tabsName == '人工计划'){
            this.getLefttypelist()
        }

        // 彩种变化 改变左侧菜单数据
       if(this.$store.state.tabsName == '冷热分析' || this.$store.state.tabsName == '遗漏分析' || this.$store.state.tabsName == '走势图表'){
           this.getLeftMenuDate(2);
        }
    },

    websockeinfo(){  //websocket推送的数据变化
      if(this.websockeinfo.data.id == this.$store.state.lottery_id){  //匹配当前彩种       
       this.openInfo = this.websockeinfo.data;
      }
      if(this.websockeinfo.data.total_number){
        this.online_number = this.websockeinfo.data.total_number;
      }
    },

    selectedCaiPiaoID(){  //
      this.getOpendataFn()
    },

    tabsName(news,old){
      switch(news){
        case '计划推荐':
        this.islayoutLeftSelectionShow = true;
        this.isBottomCheckBoxShow = false;
        this.getLeftMenuDate(2);
        this.selectionTabsTitle = '计划列表';
        break;
        case '人工计划':
        this.islayoutLeftSelectionShow = true;
        this.isBottomCheckBoxShow = false;
        this.getLeftMenuDate(1);
        this.selectionTabsTitle = '号码验证';
        break;
        case '历史验证':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = false;
        break;
        case '缩水工具':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = false;
        break;
        case '倍投计算':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = false;
        break;
        case '走势图表':
        this.islayoutLeftSelectionShow = true;
        this.isBottomCheckBoxShow = false;
        this.getLeftMenuDate(2);
        this.selectionTabsTitle = '走势名称';
        break;
        case '冷热分析':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = true;
        this.getLeftMenuDate(2);
        this.selectionTabsTitle = '冷热分析列表';
        break;
        case '遗漏分析':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = true;
        this.getLeftMenuDate(2);
        this.selectionTabsTitle = '遗漏分析列表';
        break;
        case '开奖历史':
        this.islayoutLeftSelectionShow = false;
        this.isBottomCheckBoxShow = false;
        break;
      }
    },
  },

  created() {
    if (window.require) { 
            ipc.send('resetWin');  // 重置窗口大小
            ipc.send('updata');  // 检查线上版本是否有更新
       }   
  },

  mounted() {
    this.onLoadFn(); // 弹出确认更新按钮
    this.getLitterytype()   //获取左侧彩票类型信息
    this.username=localStorage.getItem("username");  //获取底部用户名
    this.getBottomuseronline()  //获取底部在线用户数信息
    this.getOpendataFn()  //获取中奖号码
    this.onChangeMenu();  // 修改用户菜单选中状态位置

    // 获取用户详情
    let _self = this;
    _self.postObtainUserInfoByUid();
    window.setInterval(function(){
      _self.postObtainUserInfoByUid();
    },600000);    

  },
  methods: {

    onLoadFn(){ //下载更新动画
            let _self = this;
            if (window.require) { 
                ipc.on('main-loadfn', (event, arg) => {
                    if(arg.force){
                          _self.$alert('检查到有新版本，点击确定更新?', '提示', {
                              confirmButtonText: '确定',
                              type: 'info',
                              showClose:false,
                              callback: action => {
                                _self.isLoad = true;
                                ipc.send('onConfirmFn',arg.url);
                              }
                            });
                    }else{
                        _self.$confirm('检查到有新版本，点击确定更新?', '提示', {
                          confirmButtonText: '确定',
                          type: 'info',
                          closeOnClickModal:false
                        }).then(() => {
                            _self.isLoad = true;
                            ipc.send('onConfirmFn',arg.url);
                        })
                    }
                });
            }   
        },

    getLitterytype(){  //获取左侧彩票类型信息      
      this.https("index/getObtainLotteryList").then(data=>{
        this.parentOptions=data; 
      })

    },

    getBottomuseronline(){  //获取底部在线用户数信息
      this.https("common/getObtainOnlineNumber").then(data=>{
        this.footerMgs = data;
        this.online_number = data.online_number;
      })
    },

    getOpendataFn(){  //获取中奖号码      
      this.https("index/getIndexOpenData", {lottery_id: this.$store.state.lottery_id}).then(
        data => {
          data.open.short_expect = parseInt(data.open.short_expect) + 1
            this.openInfo = data.open;
        }
      )
    },
    
    // 最小化主窗口
    onMinfun(){
          if (window.require) { 
            ipc.send('window-min');
       }   
    },
    
    // 最大化窗口
    onMaxfun(){
        this.is_max = !this.is_max;
        if (window.require) { 
            ipc.send('window-max',this.is_max);
       }   
    },

    // 关闭主窗口
    onClosefun(){ 
      if (window.require) { 
            ipc.send('window-close');
            this.https('Manual/RechargePlanList',{is_esc: 1}).then(data => {})          
       }
    }, 

    onChangeMenu(){ //修改菜单选中状态位置
      let url = window.location.href;
      let urlStr = url.split('#')[1];
      if(urlStr == '/MembershipRecharge' || urlStr == '/usercenter'){
        this.nowIndex = 4;
      }
    },

    //获取用户详情
    postObtainUserInfoByUid(){
      this.https('User/postObtainUserInfoByUid',{},'post')
      .then(data => {
        // 获取当前时间戳与有效期时间戳做对比，判断天数是否小于七天，根据身份不同给出不同提示
         let timestamp = data.use_end_time - Date.parse(new Date())/1000;
         let day = Math.floor(timestamp/(24*60*60));
         if(day<7){
          //  普通会员0，招商2，直属3,跳转充值
          if(this.$store.state.userInfo.member_type_int == 0 
            || this.$store.state.userInfo.member_type_int == 2
            || this.$store.state.userInfo.member_type_int == 3){
                      let msgText = `您当前剩余使用时间已不足[${day}]!请尽快续费`
                      if(day<=0){
                          msgText = `您当前软件使用时间已到期!请尽快续费`
                      }
                      this.$confirm(msgText, '提示', {
                      confirmButtonText: '前往续费',
                      cancelButtonText: '下次再说',
                      type: 'warning'
                    }).then(() => {
                      if(this.$store.state.userInfo.member_type_int == 0 ){ // 跳转到充值页面
                        this.$router.push('/MembershipRecharge');
                      }else{
                        this.$router.push('/AgentRecharge');
                      }
                      this.nowIndex = 4;
                    }).catch(() => {});
            }else if(this.$store.state.userInfo.member_type_int == 1){ // 主管账户
              let msgText = `您当前剩余使用时间已不足[${day}]!请尽快续费`
                      if(day<=0){
                          msgText = `您当前软件使用时间已到期!请尽快续费`
                      }
                      this.$confirm(msgText, '提示', {
                      confirmButtonText: '前往联系',
                      cancelButtonText: '下次再说',
                      type: 'warning'
                    }).then(() => {
                      // 跳转到充值页面获取上级用户并存入发送人信息
                      this.onGetSuperior();
                      this.$router.push('/chatroom');
                      this.nowIndex = 2;
                    })
                    .catch(() => {});
            }
         }
         data.use_end_time = format(data.use_end_time,1);
         this.$store.commit('setUserInfo',data);
      })
    },

    //提示联系上级 打开聊天室 打开上级窗口
    onGetSuperior(){ 
            let uid = this.$store.state.userInfo.id;
            this.https('Chat/postObtainUserParentInfo',{uid:uid})
            .then(data => {
                 this.getNetMessage(uid,'',data.id,1);
                 let userInfo = {name:data.nickname,id:data.id,group_id:''}
                 this.$store.commit('setToUserInfo',userInfo);
            })
    },

    //主管账户到期 提示联系上级 打开聊天室 获取历史消息
    getNetMessage(uid,group_id,from_uid,page){ 
            this.https('chat/postObtainMessageRecordLimit',{uid:uid,group_id:group_id,from_uid:from_uid,page},'post')
            .then(data =>{
                    let root = [];
                    for(var i = data.data.length-1;i>=0;i--){
                        root.push(data.data[i]);
                    }
                    this.$store.commit('setAllMsgList',root);
                    this.https('chat/postUpdateMessageStatus',{uid:uid,group_id:group_id,from_uid:from_uid},'post')
                    .then(data => {
                    });
            })
      },
      
    // 打开官网
    toGuanwang() {
     shell.openExternal(this.footerMgs.official_website_link);
    },

    // 获取左侧菜单数据/样式 type=1/直接选号码验证.. type=2/计划列表.. type=3/冷热分析列表
    getLeftMenuDate(type){
      let lottery_id = this.$store.state.lottery_id;
      let lottery_type = this.$store.state.CaiPiaoType;
      let tabsId = this.$store.state.tabsId;
      switch(type){
        case 1:
        this.https("/manual/getObtainList",{lottery_type_identification:lottery_type})
        .then(data => {
          this.selectionListVar = data; 
          var Lname = data[0].child[0].name
          var Lid = data[0].child[0].id
          var Lclassn = data[0].child[0].class
          let menu = {name:Lname,id:Lid,planclass:Lclassn}
          this.$store.commit("setLeftMenuName", menu);
        });
        break;
        case 2:
        this.https("Index/getClientHomeSecondMenu",{lottery_id:lottery_id,id:tabsId})
        .then(data => {
          if(this.$store.state.indexleftinfo.id && this.$store.state.tabsName == '计划推荐'){
             data.forEach((el,j)=>{
              if(el.id == this.$store.state.leftTaba.id){
                  el.status = 1
              } else {
                  el.status = 0
              }
              el.child.forEach((item, j) => {
                if(item.id == this.$store.state.indexleftinfo.id){
                    item.status = 1 
                }
              })
            });
          } else {
            if(data[0].child.length != 0){
              data[0].child[0].status = 1
            }
          }
          this.selectionListVar = data;
          this.$store.commit('setrecommend', data)
          var Lname = data[0].child[0].name
          var Lid = data[0].child[0].id
          var Lclassn = data[0].child[0].class
          let menu = {name:Lname,id:Lid,planclass:Lclassn}         
          this.$store.commit("setLeftcache", menu);
        });
        break;
      }
    },

    getLefttypelist(){  //type为1的左侧玩法列表
      this.https("/manual/getObtainList",{lottery_type_identification:this.$store.state.CaiPiaoType})
        .then(data => {
          this.selectionListVar = data; 
          var Lname = data[0].child[0].name
          var Lid = data[0].child[0].id
          var Lclassn = data[0].child[0].class
          let menu = {name:Lname,id:Lid,planclass:Lclassn}         
           this.$store.commit("setLeftMenuName", menu);
        });
    },

    getLefttypeclientlist(){  //计划推荐玩法
      this.https("Index/getClientHomeSecondMenu",{lottery_id:this.$store.state.lottery_id,id:this.$store.state.tabsId})
        .then(data => {        
          if(data[0].child.length != 0){
            data[0].child[0].status = 1
          }
          this.$store.commit('setrecommend', data)
          this.selectionListVar = data;
          var Lname = data[0].child[0].name
          var Lid = data[0].child[0].id
          var Lclassn = data[0].child[0].class
          let menu = {name:Lname,id:Lid,planclass:Lclassn}         
           this.$store.commit("setLeftcache", menu);
        });
    },

    // 关闭商业合作窗口
    closeBusinessFun(){
      this.isBusiNess = false;
    },

    // 关闭意见反馈窗口
    closeOpinionFun(){
      this.isOpinion = false;
    },

    //获取级联选择器返回的selectionValue值
    parentSelectionFuc(data) {
      //根据选择的彩种类型改变相关组件的显示状态
      this.cascadeSelectionlotteryListsArr = this.parentOptions[data[0]].children;
      this.cascadeSelectionlotteryListsArr.forEach(el=>{
        if(el.value == data[1]){
          this.caipiaoType = el.type;
          this.selectedCaiPiaoID = el.value;
          this.$store.commit('setCaiPiaoLabel',el.label);
          this.$store.commit('getCaiPiaoType',el.type);
          this.$store.commit('getCaiPiaoID',el.value);
        }
      });
    },

    // 切换顶部菜单
    changeLayoutTabs(index,text){
      this.$store.state.tabsId = ''
      this.$store.state.tabsName = ''
      if(index == 3){
          this.$toast({
               message: '即将开放，敬请期待'
           })
           return ;
      }
      if(index == 5){
        if(text == '商务合作'){
          this.isBusiNess = true;
        }else if(text == '意见反馈'){
          this.isOpinion = true;
        }
        this.isSubmenu = !this.isSubmenu;
      }else{
          if(index != 0){
            this.islayoutLeftSelectionShow = false;
            this.isBottomCheckBoxShow = false;
          }
          this.headerTabsLists.forEach((el,k)=>{
            if(k == index){
              if(this.$store.state.userInfo.use_end_time == '1970/01/01 08:00:00' && this.$store.state.userInfo.is_expire == 1){ //如果用户为自己注册，且未支付，所有菜单无法点击
                // 用户第一次登陆且未充值，点击无反应
              }else{
                  if(this.$store.state.userInfo.is_expire == 1 && (text=='首页' || text=='聊天室')){
                    // 提示用户已到期 需充值
                      this.$toast({message:'您当前使用时间已到期，请尽快续费'})
                  }else{
                      this.$router.push(el.url);
                      this.nowIndex = index;
                      this.isSubmenu = false;
                  }
              }
            }
          })
      }
    },

    // 关闭意见反馈商务合作菜单
    onCloseModel(){
      this.isSubmenu = false;
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import url(../assets/css/public.less);
@import url(../assets/css/layout.less);
</style>
